資料呈現於畫面上

如果要將 Vue Data 呈現於畫面上，主要有以下的方式：

• {{}}：使用雙大括號中間可直接插入元件資料或者任何表達式內容來呈現。
• v-text：與前者相同，同時可運用在標籤上。
• v-once：綁定的標籤僅會輸出一次資料於畫面上，往後的更新將不會再做更動。
• v-html：可同時輸出 HTML 結構。

// html
<div id="app">
  <h4>字串</h4>
  {{ text }}
  <span v-text="text"></span>
  <input type="text" class="form-control" v-model="text">

  <h4 class="mt-3">原始 HTML</h4>
  {{ rawHtml }}
  <p v-html="rawHtml">請在此加入原始 HTML 結構</p>
  <p><a href="https://cn.vuejs.org/v2/api/#v-html">額外注意事項</a></p>

  <h4 class="mt-3">單次綁定</h4>
  <div v-once="text">此欄位為單次綁定 {{ text }}</div>
</div>


// JS
var app = new Vue({
  el: '#app',
  data: {
    text: '這是一段文字',
    rawHtml: `<span class="text-danger">紅色文字</span>`,
  },
});

課程範例

資料雙向綁定：

說明：用於表單的資料與元件產生雙向綁定

• v-model

注意：v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的數據作為數據來源。需透過 JavaScript 在元件的 data 選項中宣告初始值。

// html
<div id="app">
  <input type="text" v-model="message">
  {{ message }}
</div>

// JS
var app = new Vue({
  el: '#app',
  data: {
    message: '哈囉'
  }
})

• 將 v-model 與 data 中的 message 綁定
• 此為雙向綁定，當 v-model 中的 message 值改變時，畫面上的 {{ message }} 也會一起更動
  課程範例

v-model 修飾符

此修飾符是搭配 v-model 使用，與 v-on 的觸發器略有不同，用來延遲觸發、改變型別、修飾字串等等

lazy

lazy：避免持續性觸發，可以在編輯完後才觸發資料更新（使用 change 的形式進行同步）

// html
<div id="app">
  <input type="text" v-model.lazy="message"> // v-model 後方加上 .lazy 修飾符
  {{ message }}
</div>

// JS
var app = new Vue({
  el: '#app',
  data: {
    message: '哈囉'
  }
})

• v-model 後方加上 .lazy 修飾符
• 當 input 編輯時，無法直接修改畫面上的值，需要離開 input 時才會觸發
  課程範例

number

number：限制只有數值型別的資料才能寫入，以下範例中的 number 資料會是以 number 型別傳入，無法透過該 input 套用其它資料型別。

// html
<div id="app">
  <input type="text" v-model.number="number" >
  {{ number }}
  {{ typeof number }}
  <hr>
  <input type="text" v-model="number2">
  {{ number2 }}
  {{ typeof number2 }}
</div>

// JS
var app = new Vue({
  el: '#app',
  data: {
    number: 1,
    number2: '1'
  }
})

• 無論 input type 為何，input 預設所傳入的型別為字串。
• 可以使用 .number 的修飾符，確保用戶所輸入的為純數值。
  課程範例

trim

trim：修飾掉首尾的空白。

// html
<div id="app">
  <input type="text" v-model.trim="text" >
  {{ text }}你好（文字中間無法插入其它空白）
  <hr>
</div>

// JS
var app = new Vue({
  el: '#app',
  data: {
    text: '小明',
  }
})

• 用戶在輸入文字時，可能會在結尾補上空白，使用 .trim 修飾符則會移除結尾的空白字元。
  課程範例